<template>
    <div class="body">
        <Tape :goodsName="goodsInfo.goodsName"></Tape>
        <Main :goodsInfo="goodsInfo"></Main>
    </div>
</template>

<script>
import Tape from "@/pages/Detail/Tape";
import Main from "@/pages/Detail/Main";
import { mapState } from "vuex";
export default {
    components: {
        Tape,
        Main,
    },
    mounted() {
        this.getData();
        // 在总线上绑定事件(添加购物车)
        this.$bus.$on("addShopCart", this.addShopCart);
    },
    beforeDestroy(){
        // 不能忘了在注销页面的时候注销事件，不然每次都会再注册一个
        this.$bus.$off("addShopCart");
    },
    methods: {
        async getData() {
            try {
                await this.$store.dispatch(
                    "detail/getGoodsInfo",
                    this.$route.params.goodId
                );
            } catch (error) {
                this.$message({
                    message: error,
                    type: "error",
                });
            }
        },
        async addShopCart(goodsItem) {
            try {
                await this.$store.dispatch("detail/addShopCart", goodsItem);
                // 添加成功后跳转到加入购物车成功页面
                this.$router.push({
                    path: "/addshopcartsuccess",
                    query: {
                        goodsItem: {
                            goodsName: this.goodsInfo.goodsName,
                            goodsNum: goodsItem.goodsNum,
                        },
                    },
                });
            } catch (error) {
                this.$message({
                    message: error,
                    type: "error",
                });
            }
        },
    },
    computed: {
        ...mapState("detail", ["goodsInfo"]),
    },
};
</script>

<style scoped>
.body {
    font: 14px tahoma, arial, Microsoft YaHei, Hiragino Sans GB, "\u5b8b\u4f53",
        sans-serif;
    padding-bottom: 130px;
}
a {
    text-decoration: none;
}
</style>